<template>
  <div class="image-upload" :class="{disabled:fileList.length>=limit}">
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :limit="limit"
      :on-exceed="onExceed"
      :on-remove="handleRemove"
      :http-request="httpRequest"
      :on-change="onChange"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" title="图片预览">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import cos from '@/utils/cos.js'
export default {
  props: {
    limit: { // 限制上传文件的最大个数
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [
      ]
    }
  },
  computed: {
    isAllUploadSuccess() {
      const res = this.fileList.every((item) => {
        return item.status === 'success'
      })
      return res
    }
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /**
       * 超出限制时执行的钩子
       */
    onExceed() {
      this.$message.warning('达到最大限制')
    },
    /**
     * 删除图片时触发的函数
     * file删除的文件，fileList剩下的文件列表
     */
    handleRemove(file, fileList) {
      this.fileList = this.fileList.filter((item) => {
        return item.uid !== file.uid
      })
    //   this.fileList = [...fileList]
    },
    /**
     * 自定义的上传方法
     */
    httpRequest({ file }) {
      const newFile = this.fileList.find((item) => {
        return item.uid === file.uid
      })
      // 改变状态为正在上传
      newFile.status = 'uploading'
      cos.uploadFile({
        Bucket: 'hr-project-1326638452', /* 填写自己的 bucket，必须字段 */
        Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
        Key: +new Date() + file.name, /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
        Body: file, // 上传文件对象
        SliceSize: 1024 * 1024 * 5, /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
        onProgress: function(progressData) {
          // 上传的进度
        //   console.log(JSON.stringify(progressData))
          newFile.percentage = progressData.percent * 100
        }
      }, (err, data) => {
        // 成功或者失败的回调
        if (err) {
          console.log('上传失败', err)
          this.$$message.error('上传失败')
        } else {
          // 改变本地页面显示图片的状态,明显一点
          setTimeout(() => {
            newFile.status = 'success'
          }, 300)
          // //默认与网站协议保持统一
          newFile.url = '//' + data.Location
        }
      })
    },
    /**
     * 上传图片状态改变时触发的函数
     */
    onChange(file, fileList) {
      this.fileList = [...fileList]
    },
    /**
     * 上传前执行的函数
     */
    beforeUpload(file) {
      // 上传图片所在的类型
    //   console.log(file)
      const imageType = ['image/jpeg', 'image/jpg', 'image/png']
      if (!imageType.includes(file.type)) {
        this.$message.warning('图片类型不符')
        return false
      }
      if (file.size / 1024 / 1024 > 2) {
        this.$message.warning('图片大小不符')
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
    ::v-deep {
        .el-upload--picture-card {
        display: none;
    }
    }
}
</style> >
